<template>
	<view class="">
		<view class="bgf p-r-30 p-b-30" style="display: flex;flex-direction: row-reverse;">
			<view class="filter flex-item-center" @click="openCalendar">
				<view class="flex-item-center" v-if="!time">
					<image src="../../static/guolv.png" mode=""></image>时间筛选
				</view>
				<view class="" v-else>
					{{time}}
				</view>
			</view>
		</view>
		<zb-table :show-header="true" :columns="table.title" :stripe="true" :fit="false" :border="true"
			:data="table.data"></zb-table>
		<u-calendar :show="show" allowSameDay mode="range" monthNum="20" :defaultDate="defaultDate"
			min-date="2023-01-01" max-date="2050-01-01" @confirm="confirmCalendar" @close="closeCalendar"></u-calendar>
	</view>
</template>

<script>
	import dayjs from 'dayjs';
	export default {
		data() {
			return {
				table: {
					title: [],
					data: []
				},
				type: '',
				show: false,
				time: `${dayjs().format('YYYY-MM-DD')} - ${dayjs().format('YYYY-MM-DD')}`,
				search: {
					begin_time: dayjs().format('YYYY-MM-DD'),
					end_time: dayjs().format('YYYY-MM-DD')
				},
				defaultDate: [dayjs().format('YYYY-MM-DD'), dayjs().format('YYYY-MM-DD')]
			}
		},
		onLoad(e) {
			this.type = e.type == 1 ? 'preArrive' : 'afterArrive'
			this.getTable()
		},
		methods: {
			async getTable() {
				const {
					data
				} = await this.$api.home[this.type]({
					...this.search
				})
				console.log(data)
				this.table = data
				this.table.title = this.table.title.map((e) => ({
					...e,
					name: e.key,
					label: e.value
				}))

			},
			openCalendar() {
				// console
				this.show = true
			},
			confirmCalendar(e) {
				// console.log(e.length-1)
				// console.log(e[e.length-1])
				this.time = `${e[0]} - ${e[e.length-1]}`
				this.search.begin_time = e[0]
				this.search.end_time = e[e.length - 1]
				this.defaultDate = [e[0], e[e.length - 1]]
				this.show = false
				this.getTable()

			},
			closeCalendar() {
				this.show = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.filter {
		border: 2rpx solid #999;
		border-radius: 50rpx;
		padding: 12rpx 20rpx;
		font-size: 22rpx;

		image {
			width: 30rpx;
			height: 30rpx;
			margin-right: 10rpx;
		}
	}
	::v-deep {
		.zb-table-content{
			font-size: 30rpx;
		}
	}
</style>